<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 实例的生命周期：在创建一个vue实例时，在它的构造函数内先后发生的事情 
    
        第一个阶段：创建阶段

        细化为4个阶段：

            第一个阶段：收集配置项，初始化事件    ------ beforeCreate

            第二个阶段：配置项配置到实例，但el没有挂载  ------ created   
            
                注：data methods都可以访问，请求数据

            第三个阶段：生成虚拟dom,存在内存中  ,el没有挂载        ------ beforeMount

            第四个阶段: 虚拟dom替换el指定的元素, el挂载完成       ------ mounted

                配置项内有：render ----  template: 会替换el指定的元素  ---  el元素

                可以操作dom 显示隐藏   获取焦点

        第二个阶段：更新阶段     可以触发多次   

            数据变化,视图没有改变 ---- beforeUpdate

            视图改变 ----- updated


        第三个阶段：销毁阶段   只执行一次
        
            销毁前 ----- beforeDestory  

            销毁后 ----- destroyed
    -->
    <div id="app">
        {{msg}}
        <button @click="change">change</button>
        <button @click="destory">销毁</button>
        <input type="text" ref="ipt">
    </div>
    <script src="./vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        let vm = new Vue({
            // el:'#app',
            data:{
                msg:'hello',
                list:[]
            },
            // template:'<h1>{{msg}}</h1>',
            // render(createElement){
            //     return createElement('h1','render')
            // },
            methods:{
                change(){
                    console.log("======") 
                    this.msg = 'world';
                },
                destory(){
                    this.$destroy()
                }
            },
            beforeCreate() {
                console.log("before");
                console.log(this.$data);
            },
            created(){
                console.log(this.$data);
                console.log(this.$el);
                this.$data.list = [];
                // axios.get('/api/list').then((res) => {
                //     this.list = res.data
                // }).catch((err) => {
                //     console.warn(err);
                // })
            },
            beforeMount() {
                console.log("beforeMount");
                console.log(this.$el);
                console.log(this.$refs.ipt);
            },
            mounted() {
                console.log("mounted");
                console.log(this.$el);
                this.$refs.ipt.focus();
            },
            beforeUpdate() {
                console.log("更新前")
            },
            updated() {
                console.log("更新之后")
            },
            beforeDestroy() {
                console.log(this)
                console.log(this.$el);
                console.log(this.msg);
                console.log("销毁前")
            },
            destroyed() {
                console.log(this)
                console.log(this.$el);
                console.log(this.msg);
                console.log("销毁完毕")
            }
        })

        vm.$mount('#app');
    </script>
</body>
</html>